<template>
    <div class="app-container">
        <!-- <h2>控制台</h2> -->
        <el-card shadow="always">
            <div>
                <div class="flex justify-between align-center">
                    <div>
                        <p style="color:#fd2f2f;">当前是美国时区:(-7),对应时间：{{ us_time | parseTime('y-m-d h:i:s 星期a') }}</p>
                        <el-radio-group @change="day_change" v-model="saleSearch.dateType" size="small" class="mr5">
                            <el-radio-button :label="0">今天</el-radio-button>
                            <el-radio-button :label="1">昨天</el-radio-button>
                            <el-radio-button :label="2">最近7天</el-radio-button>
                            <el-radio-button :label="3">本月</el-radio-button>
                        </el-radio-group>
                        <el-date-picker v-model="saleSearch.datetime" type="daterange" :picker-options="pickerOptions" range-separator="至" size="small" start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels />
                        <el-button @click="searchs" type="primary">搜索</el-button>
                    </div>
                </div>
            </div>
        </el-card>
        <el-row v-loading="loading">
            <el-col :md="12" :sm="12">
                <el-card class="chart-card" shadow="always">
                    <!-- <div slot="header">
                        <span>总销售额 $ {{this.sales}}</span>
                        <el-tooltip content=-  默认最近15天销售额" placement="top">
                            <i class="el-icon-q uestion pull-right" style="cursor: pointer"> </i>
                        </el-tooltip>
                    </div> -->
                    <div class="chart-card-num">销售额 $ {{this.sales}}</div>
                    <div class="chart-card-content" style="padding-top: 18px">
                        <span class="mr10">
                            <span>
                                预计毛利
                                <span style="font-size: 25px;color:#fd2f2f;">
                                    ${{ this.gross_profit }}
                                </span>
                                |    ROI<span style="font-size: 25px;color:#fd2f2f;">
                                    {{ this.roi }}
                                </span>
                            </span>
                        </span>
                    </div>
                    <el-divider class="mt5 mb5" />
                    <div class="chart-card-text">
                        总单量 <span style="font-size: 25px;">{{ this.paid }}</span>
                        |   新增争议单 <span style="font-size: 25px;">{{ this.dispute }}</span>
                        |   退款金额 <span style="font-size: 25px;">{{ this.refund_money }}</span>
                        |   退款单 <span style="font-size: 25px;">{{ this.refund }}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :md="12" :sm="12">
                <el-card class="chart-card" shadow="always">
                    <!-- <div slot="header">
                        <span>FB广告总消耗 {{this.adv_cost}}</span>
                        <el-tag size="mini" class="pull-right">$</el-tag>
                    </div> -->
                    <div class="chart-card-num">
                        总广告消耗 {{this.adv_cost}}
                        <span>
                            </span>
                    </div>
                    <!-- <div class="chart-card-content" style="padding-top: 18px">
                        <span class="mr10">
                            <span>
                                ROI 
                                <span style="font-size: 25px;">
                                    {{ this.roi }}
                                </span>
                            </span>
                        </span>
                    </div> -->
                    <el-divider class="mt5 mb5" />
                    <div class="chart-card-text">
                        <template>
                            <el-table
                            :data="platform_tabel"
                            style="width: 100%">
                            <el-table-column
                                prop="facebook"
                                label="Facebook">
                            </el-table-column>
                            <el-table-column
                                prop="Google"
                                label="Google"
                                width="">
                            </el-table-column>
                            <el-table-column
                                prop="TikTok"
                                label="TikTok"
                                width="">
                            </el-table-column>
                            <el-table-column
                                prop="bing"
                                label="bing">
                            </el-table-column>
                            <el-table-column
                                prop="snapchat"
                                label="snapchat">
                            </el-table-column>
                            </el-table>
                        </template>
                        <!-- 平台消耗 <span style="font-size: 17px;color:#5b8ff9;word-wrap: break-word;word-break: normal;">{{ this.platform_consumption }}</span> -->
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- <el-card shadow="always" body-style="padding:0 20px;" v-loading="loading">
            <el-divider class="mt5 mb5" />
            <div>平台消耗</div>
            <G2BarChart style="margin-top: 20px;" idName="c12v" :chartData="advcost_list" :height="350" label="value" />
        </el-card> -->
        <!-- 销售额、注册量 -->
        <el-card shadow="always" body-style="padding:0 20px;" v-loading="loading">
            <el-divider class="mt5 mb5" />
            <el-row>
                <el-card class="chart-card" shadow="always">
                    <div>店铺销售额</div>
                    <G2BarSalesChart idName="c51" :chartData="shopify_sales" :height="750" label="value" />
                </el-card>
            </el-row>
        </el-card>
        <el-card shadow="always" body-style="padding:0 20px;" v-loading="loading">
            <el-divider class="mt5 mb5" />
            <el-row>
                <el-card class="chart-card" shadow="always">
                    <div>运营业绩</div>
                    <G2BarSalesDayChart idName="c61" :chartData="shopify_sales_day" :height="750" label="value" />
                </el-card>
            </el-row>
        </el-card>
        <el-card shadow="always" body-style="padding:0 20px;" v-loading="loading">
            <el-divider class="mt5 mb5" />
            <div>FB广告消耗金额</div>
            <G2Line2Chart idName="c1" :chartData="advertising_consumption" :height="350" label="value" />
        </el-card>
        <!-- <el-card shadow="always" body-style="padding:0 20px;" v-loading="loading">
            <el-divider class="mt5 mb5" />
            <el-row>
                <el-card class="chart-card" shadow="always">
                    <div>店铺业绩</div>
                    <G2BarTransverseChart idName="c5" :chartData="shopify_performance" :height="350" label="value" />
                </el-card>
            </el-row>
        </el-card> -->
        <el-card shadow="always" body-style="padding:0 20px;" v-loading="loading">
            <el-divider class="mt5 mb5" />
            <el-row>
                <el-col :md="16" :sm="12">
                    <div>其他平台渠道总销售额</div>
                    <G2Bar2Chart idName="c13" :chartData="platform_sales" :height="350" label="value" />
                </el-col>
                <el-col :md="8" :sm="8">
                        <div>运营业绩以及ROI</div>
                        <G2BreadChart idName="c6" :chartData="operational_roi" :height="350" label="value"/>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import G2BarChart from '@/views/dashboard/G2BarChart'
import G2Bar2Chart from '@/views/dashboard/G2Bar2Chart'
import G2LineChart from '@/views/dashboard/G2LineChart'
import G2Line2Chart from '@/views/dashboard/G2Line2Chart'
import G2BreadChart from '@/views/dashboard/G2BreadChart'
import G2BarTransverseChart from '@/views/dashboard/G2BarTransverseChart'
import G2BarSalesChart from '@/views/dashboard/G2BarSalesChart'
import G2BarSalesDayChart from '@/views/dashboard/G2BarSalesDayChart'
import { mapGetters } from 'vuex'
const operational_roi = [
    { value: 321, key: '胡刚强', roi: '1.2' },
    { value: 312, key: '胡倩', roi: '1.7' },
    { value: 412, key: '伍文娟', roi: '1.8' },
    { value: 231, key: '柯海波', roi: '1.1' },
    { value: 131, key: '张兴', roi: '1.8' },
    { value: 421, key: '孙密', roi: '1.8' },
    { value: 121, key: '曾贝', roi: '1.7' },
    { value: 461, key: '姜良杰', roi: '1.6' },
    { value: 345, key: '龙颖', roi: '1.6' },
    { value: 564, key: '伍小凤 (南昌)', roi: '1.5' },
    { value: 345, key: '胡景佳', roi: '1.2' },
    { value: 624, key: '吴梦琪', roi: '1.5' },
    { value: 624, key: '陈君慧wh', roi: '1.2' },
    { value: 983, key: '任洁文wh', roi: '1.3' },
    { value: 663, key: '何悦敏', roi: '1.2' },
    { value: 163, key: '胡锦', roi: '1.3' },
]

const shopify_sales = []
const shopify_sales_day  = []

const shopify_performance = [
    { key: 'riceelcosmetics', type: '普通订单', value: 0.66 },
    { key: 'riceelcosmetics', type: '争议中的订单', value: 0.16 },
    { key: 'riceelcosmetics', type: '败诉订单', value: 0.26 },
    { key: 'lilybras.com', type: '普通订单', value: 0.56 },
    { key: 'lilybras.com', type: '争议中的订单', value: 0.16 },
    { key: 'lilybras.com', type: '败诉订单', value: 0.16 },
    { key: 'woobilly.com ', type: '普通订单', value: 0.71 },
    { key: 'woobilly.com ', type: '争议中的订单', value: 0.21 },
    { key: 'woobilly.com ', type: '败诉订单', value: 0.21 },
    { key: 'cloudbras.com ', type: '普通订单', value: 0.39 },
    { key: 'cloudbras.com ', type: '争议中的订单', value: 0.63 },
    { key: 'cloudbras.com ', type: '败诉订单', value: 0.18 },
    { key: 'choose bra', type: '普通订单', value: 0.42 },
    { key: 'choose bra', type: '争议中的订单', value: 0.65 },
    { key: 'choose bra', type: '败诉订单', value: 0.13 },
    { key: 'bettybra.com', type: '普通订单', value: 0.16 },
    { key: 'bettybra.com', type: '争议中的订单', value: 0.38 },
    { key: 'bettybra.com', type: '败诉订单', value: 0.06 },
]
const advcost_list = [
    { key: 'facebook', value: 25584.630 },
    { key: 'outbrain', value: 1897.910 },
    { key: 'Google', value: 327.660 },
    { key: 'TikTok', value: 769.170 },
    { key: 'bing', value: 10.050 },
    { key: 'snapchat', value: 63.770 },
]

const advertising_consumption = [
    { key: '2023-04-01', type: '胡刚强', value: 127 },
    { key: '2023-04-01', type: '胡倩', value: 312.9 },
    { key: '2023-04-01', type: '张兴', value: 126.9 },
    { key: '2023-04-01', type: '孙密', value: 124.2 },
    { key: '2023-04-01', type: '曾贝', value: 129.5 },
    { key: '2023-04-02', type: '胡刚强', value:125.7 },
    { key: '2023-04-02', type: '胡倩', value: 124.5 },
    { key: '2023-04-02', type: '张兴', value: 12.5 },
    { key: '2023-04-02', type: '孙密', value: 128.4 },
    { key: '2023-04-02', type: '曾贝', value: 121.9 },
    { key: '2023-04-03', type: '胡刚强', value: 121.5 },
    { key: '2023-04-03', type: '胡倩', value: 115.2 },
    { key: '2023-04-03', type: '张兴', value: 225.2 },
    { key: '2023-04-03', type: '孙密', value: 117 },
    { key: '2023-04-03', type: '曾贝', value: 216.5 },
    { key: '2023-04-04', type: '胡刚强', value: 116.6 },
    { key: '2023-04-04', type: '胡倩', value: 213.3 },
    { key: '2023-04-04', type: '张兴', value: 114.2 },
    { key: '2023-04-04', type: '孙密', value: 118.3 },
    { key: '2023-04-04', type: '曾贝', value: 110.3 },
    { key: '2023-04-05', type: '胡刚强', value: 17 },
    { key: '2023-04-05', type: '胡倩', value: 31.9 },
    { key: '2023-04-05', type: '张兴', value: 16.9 },
    { key: '2023-04-05', type: '孙密', value: 14.2 },
    { key: '2023-04-05', type: '曾贝', value: 91.5 },
    { key: '2023-04-06', type: '胡刚强', value: 15.7 },
    { key: '2023-04-06', type: '胡倩', value: 114.5 },
    { key: '2023-04-06', type: '张兴', value: 81.5 },
    { key: '2023-04-06', type: '孙密', value: 118.4 },
    { key: '2023-04-06', type: '曾贝', value: 111.9 },
    { key: '2023-04-07', type: '胡刚强', value: 211.5 },
    { key: '2023-04-07', type: '胡倩', value: 115.2 },
    { key: '2023-04-07', type: '张兴', value: 215.2 },
    { key: '2023-04-07', type: '孙密', value: 117 },
    { key: '2023-04-07', type: '曾贝', value: 216.5 },
    { key: '2023-04-08', type: '胡刚强', value: 116.6 },
    { key: '2023-04-08', type: '胡倩', value: 213.3 },
    { key: '2023-04-08', type: '张兴', value: 114.2 },
    { key: '2023-04-08', type: '孙密', value: 118.3 },
    { key: '2023-04-08', type: '曾贝', value: 110.3 },
    { key: '2023-04-09', type: '胡刚强', value: 17 },
    { key: '2023-04-09', type: '胡倩', value: 13.9 },
    { key: '2023-04-09', type: '张兴', value: 16.9 },
    { key: '2023-04-09', type: '孙密', value: 14.2 },
    { key: '2023-04-09', type: '曾贝', value: 91.5 },
    { key: '2023-04-10', type: '胡刚强', value: 15.7 },
    { key: '2023-04-10', type: '胡倩', value: 141.5 },
    { key: '2023-04-10', type: '张兴', value: 28.5 },
    { key: '2023-04-10', type: '孙密', value: 128.4 },
    { key: '2023-04-10', type: '曾贝', value: 121.9 },
    { key: '2023-04-11', type: '胡刚强', value: 221.5 },
    { key: '2023-04-11', type: '胡倩', value: 152.2 },
    { key: '2023-04-11', type: '张兴', value: 252.2 },
    { key: '2023-04-11', type: '孙密', value: 127 },
    { key: '2023-04-11', type: '曾贝', value: 226.5 },
    { key: '2023-04-12', type: '胡刚强', value: 126.6 },
    { key: '2023-04-12', type: '胡倩', value: 223.3 },
    { key: '2023-04-12', type: '张兴', value: 142.2 },
    { key: '2023-04-12', type: '孙密', value: 128.3 },
    { key: '2023-04-12', type: '曾贝', value: 122.3 },
]

const platform_sales = [
    { key: '2023-04-01', type: '败诉订单', value: 336.03 },
    { key: '2023-04-01', type: '争议中的订单', value: 661.21 },
    { key: '2023-04-02', type: '争议中的订单', value: 329.25 },
    { key: '2023-04-02', type: '败诉订单', value: 218.43 },
    { key: '2023-04-03', type: '争议中的订单', value: 210.17 },
    { key: '2023-04-03', type: '败诉订单', value: 275.31 },
    { key: '2023-04-04', type: '争议中的订单', value: 318.67 },
    { key: '2023-04-04', type: '败诉订单', value: 244.91 },
    { key: '2023-04-05', type: '争议中的订单', value: 353.89 },
    { key: '2023-04-05', type: '败诉订单', value: 436.3 },
]

export default {
    name: 'Index',
    components: { G2BarChart,G2Bar2Chart, G2LineChart, G2BreadChart,G2BarTransverseChart,G2Line2Chart,G2BarSalesDayChart,G2BarSalesChart},
    data() {
        return {
            platform_tabel: [{
                Google: '0',
                TikTok: '0',
                facebook: '0',
                bing: '0',
                snapchat: '0',
            }],

            loading: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7 - 3600 * 1000 * 15);
                    end.setTime(end.getTime() - 3600 * 1000 * 15);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 15);
                    end.setTime(end.getTime() - 3600 * 1000 * 15);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90 - 3600 * 1000 * 15);
                    end.setTime(end.getTime() - 3600 * 1000 * 15);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            advertising_consumption:advertising_consumption,
            platform_sales:platform_sales,
            shopify_performance:shopify_performance,
            shopify_sales:shopify_sales,
            shopify_sales_day:shopify_sales_day,
            operational_roi:operational_roi,
            saleSearch: {
                dateType: 0,
                datetime: '',
            },
            time: 0,
            start_time: new Date(),
            end_time: new Date(),
            us_time: 0,

            paid:0,
            purchase:0,//采购成本
            logistics:0,//物流成本
            gross_profit:0,//毛利
            platform_consumption:'',
            refund:0,
            refund_money:0,
            dispute:0,
            advcost_list:[],
            sales:0,
            adv_cost:0,
            roi:0,
            today_sales:0,
            day_changes:0,
        }
    },
    computed: {
        ...mapGetters(['avatar', 'name', 'groups_name']),
    },
    created() {
        this.now()
        this.day_change(0);
    },
    methods: {
        // 北京时间
        now() {
            // this.time = new Date().getTime()
            // setInterval(() => {
            //     this.time = new Date().getTime()
            // }, 1000)

            this.us_time = new Date().getTime() - 15 * 3600 * 1000;
            setInterval(() => {
                this.us_time = new Date().getTime() - 15 * 3600 * 1000;
            }, 1000)


        },
        day_change(val) {
            this.saleSearch.datetime = '';
            let start_time2 = new Date();
            if(val == 0){
                this.start_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() + 9 * 3600 * 1000);
            }else if(val == 1){
                this.start_time.setTime(start_time2.getTime() - 3600 * 1000 * 24 - 15 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
            }else if(val == 2){
                this.start_time.setTime(start_time2.getTime() - 3600 * 1000 * 24 * 7 - 15 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
            }else if(val == 3){
                this.start_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
            }
            this.day_changes = val;
            this.handleSkuFind();
        },
        searchs() {
            this.saleSearch.dateType = -1;
            this.day_changes = 101;
            if(this.saleSearch.datetime == undefined || this.saleSearch.datetime == null || this.saleSearch.datetime == ''){
                this.$message.error('请筛选时间');
                return false;
            }else{
                this.start_time = this.saleSearch.datetime[0]
                this.end_time = this.saleSearch.datetime[1]
            }
            this.handleSkuFind();
        },

        // sku生成回显
        async handleSkuFind() {
            if(this.start_time == undefined || this.end_time == undefined){
                let start_time2 = new Date()
                start_time2.setTime(start_time2.getTime() - 3600 * 1000 * 24 * 1);
                this.start_time = start_time2;
                this.end_time = new Date();
            }
            let start_time = Date.parse(new Date(this.start_time));
            let end_time = Date.parse(new Date(this.end_time));
            start_time = Math.round(start_time)/1000;
            end_time = Math.round(end_time)/1000;
            this.loading = true;
            let response = await this.request.post('/admin/index/dashboard', { 
                day_changes : this.day_changes,
                start_time : start_time,
                end_time : end_time
            })
            this.loading = false;
            this.paid = response.data.paid;
            this.purchase = response.data.purchase,//采购成本
            this.logistics = response.data.logistics,//物流成本
            this.gross_profit = response.data.gross_profit,//毛利
            this.refund = response.data.refund;
            this.dispute = response.data.dispute;
            this.advcost_list = response.data.advcost_list;
            this.refund_money = response.data.refund_money;
            this.adv_cost = response.data.adv_cost;
            this.roi = response.data.roi;
            this.sales = response.data.sales;
            this.today_sales = response.data.today_sales;
            this.shopify_sales = response.data.shopify_sales;
            this.shopify_sales_day = response.data.shopify_sales_day;
            // this.platform_consumption = response.data.platform_consumption;
            
            if(response.data.platform_consumption.Google > 0){
                this.platform_tabel[0].Google = response.data.platform_consumption.Google;
            }
            if(response.data.platform_consumption.TikTok > 0){
                this.platform_tabel[0].TikTok = response.data.platform_consumption.TikTok;
            }
            if(response.data.platform_consumption.bing > 0){
                this.platform_tabel[0].bing = response.data.platform_consumption.bing;
            }
            if(response.data.platform_consumption.facebook > 0){
                this.platform_tabel[0].facebook = response.data.platform_consumption.facebook;
            }
            if(response.data.platform_consumption.snapchat > 0){
                this.platform_tabel[0].snapchat = response.data.platform_consumption.snapchat;
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.app-container {
    background: #f0f2f5;
    .title-tip {
        color: #909399;
        margin: 0;
        display: block;
    }
    /* 统计卡片 */
    .chart-card {
        color: #606266;
        margin-bottom: 15px;
    }
    .chart-card-num {
        font-size: 30px;
    }

    .chart-card-content {
        height: 50px;
        box-sizing: border-box;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .chart-card-text {
        font-size: 13px;
    }
}
</style>
